<template>
    <div>
        <lab_head  />

            <lab_header :title='"学习路径 - 实验楼"'  />

        <div class="container layout layout-margin-top">


        <div class="row">
          <div class="col-md-9 layout-body">

          <div class="col-sm-6" v-for="(path,index) in path_list" :key="index" @click="stage_change(path.id)">
            <a >
              <div class="path-item">
                  <div class="col-xs-5 col-md-4  path-img">
                      <img :src="path.img">
                  </div>
                  <div class="col-xs-7 col-md-8">
                      <div class="path-name">{{ path.title }}</div>
                      <div class="path-course-num"><span>5</span> 门课程</div>
                  </div>
              </div>
            </a>

          </div>

          <div class="col-sm-6">

            <Pagination @change="show_path" v-model="pagination"></Pagination>

          </div>

          </div>
                <div class="col-md-3 layout-side">


                    <user_info  />
                    <last_paths  />
                    <QR_code  />

                </div>
            </div>
        </div>

        <lab_footer  />

    </div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
import user_info from './common/user_info';
import last_paths from './common/last_paths';
import QR_code from './common/QR_code';
import { get_path, get_stage } from './axios_api/api'



import { config,formatXml } from '../config.js';
export default {
    data(){
        return{
          // 路径数据列表
          path_list : [],
          // 分页器变量
          pagination:{
            // 当前页
            page:1,
            // 每页的数据量
            size:15,
            // 总数据
            total:0,
          },

        }
        },
    components:{
        lab_head,
        lab_header,
        lab_footer,
        user_info,
        last_paths,
        QR_code,
    },
    mounted:function(){

      this.show_path();


    },
    methods:{
      show_path(){
        var params = {page:this.pagination.page,size:this.pagination.size}
        get_path(params).then((resp)=>{
          console.log(resp.data)
          this.path_list = resp.data;
          this.pagination.total = resp.total;
        })
      },
      // 跳转到详情页并带上路径id参数
      stage_change(t){
        this.$router.push({path:"/paths/path_show/",query:{
          path_id:t
        }})
      }


    },
}
</script>

<style>
</style>
